<template>
  <div class="index">
    <!-- 页面 -->
    <Home :ref="tabRef[0]" v-show="tabIndex === 0"></Home>
    <Share :ref="tabRef[1]" v-show="tabIndex === 1"></Share>
    <Vip :ref="tabRef[2]" v-show="tabIndex === 2"></Vip>
    <Discount :ref="tabRef[3]" v-show="tabIndex === 3"></Discount>
    <User :ref="tabRef[4]" v-show="tabIndex === 4"></User>
    
    <!-- TabBar -->
    <TabBar :list="list" @change="changeTabBar"></TabBar>
  </div>
</template>

<script>
  import TabBar from "@/components/acme-design/tabbar/index.vue"
  import Home from "../../tabbar/home/index.vue"
  import Share from "../../tabbar/share/index.vue"
  import Vip from "../../tabbar/vip/index.vue"
  import Discount from "../../tabbar/discount/index.vue"
  import User from "../../tabbar/user/index.vue"
  
  export default {
    components: {
      TabBar,
      Home,
      Share,
      Vip,
      Discount,
      User
    },
    data() {
      return {
        tabIndex: 0,
        tabRef: ['homeRef', 'shareRef', 'vipRef', 'discountRef', 'userRef'],
        onLoadCount: [],
        list: [
          {
            text: "首页",
            pagePath: "pages/index/home/index",
            iconPath: "/static/tabbar/tab1.png",
            selectedIconPath: "/static/tabbar/tab1_s.gif"
          },
          {
            text: "分享",
            pagePath: "pages/index/share/index",
            iconPath: "/static/tabbar/tab2.png",
            selectedIconPath: "/static/tabbar/tab2_s.gif"
          },
          {
            text: "会员",
            pagePath: "pages/index/vip/index",
            iconPath: "/static/tabbar/tab3.png",
            selectedIconPath: "/static/tabbar/tab3_s.gif"
          },
          {
            text: "身边优惠",
            pagePath: "pages/index/discount/index",
            iconPath: "/static/tabbar/tab4.png",
            selectedIconPath: "/static/tabbar/tab4_s.gif"
          },
          {
            text: "我的",
            pagePath: "pages/index/user/index",
            iconPath: "/static/tabbar/tab5.png",
            selectedIconPath: "/static/tabbar/tab5_s.gif"
          }
        ]
      };
    },
    onShow() {
      this.$nextTick(function(){
        this.tabbarOnShow()
      })
    },
    onLoad() {
      this.$nextTick(function(){
        this.tabbarOnLoad()
      })
      this.init()
    },
    onPullDownRefresh() {
      if(this.currentRef().pullDownRefresh) {
        this.currentRef().pullDownRefresh()
      }
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 1000)
    },
    onReachBottom() {
      if(this.currentRef().reachBottom) {
        this.currentRef().reachBottom()
      }
    },
    onPageScroll(e) {
      if(this.currentRef().pageScroll) {
        this.currentRef().pageScroll(e)
      }
    },
    methods: {
      // 初始化
      init() {
        
      },
      // 当前页面ref
      currentRef() {
        return this.$refs[this.tabRef[this.tabIndex]]
      },
      // 切换TabBar
      changeTabBar(e) {
        this.pageTitle = e.item.text
        this.tabIndex = e.index
        this.tabbarOnLoad()
        this.tabbarOnShow()
      },
      // Tabbar 页面 onShow 事件
      tabbarOnShow() {
        if(this.currentRef().show) {
          this.currentRef().show()
        }
      },
      // Tabbar 页面 onLoad 事件
      tabbarOnLoad() {
        if(!this.onLoadCount[this.tabIndex] && this.currentRef().load) {
          this.currentRef().load()
        }
        this.$set(this.onLoadCount, this.tabIndex, true)
      }
    }
  };
</script>

<style lang="scss" scoped>
  .index {
    min-height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    
    /deep/ .root {
      margin-top: calc(100upx + var(--status-bar-height));
      padding-bottom: calc(100upx + env(safe-area-inset-bottom));
    }
  }
</style>